<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战 - 活动页面</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://cdn.staticfile.org/qrcodejs/1.0.0/qrcode.js"></script>




    <h2>F12打开控制台查看数据，效果更佳</h2>


    <div id="Application">

        <!--首页背景图-->
        <div class="home-banner">
            <!--桌面端-->
            <img v-if="awesome" class="home-pic" :src="list_images.pc">
            <!--移动端-->
            <img v-else class="home-pic" :src="list_images.phone">
        </div>








        <!--优惠导航-->
        <h2 class="n-h2 n-yhdh">优惠导航</h2>
        <table class="npc-table">
            <tr>
                <th>直达链接</th>
                <th>店铺</th>
            </tr>
            <tr v-for="itm in list_arr" :key="itm.id">
                <td><a :href="'#'+itm.id">优惠点我直达</a></td>
                <td>{{itm.store_name}}</td>
            </tr>

        </table>



        <div v-for="itm in list_arr" :key="itm.id">

            <!--提示-->
            <div class="main-tips">
                提示：若无法领劵，直接截图去找对应店铺客服亦可享受同样优惠价格
            </div>
            <!--标题-->
            <h2 :id="itm.id" class="n-h2">{{itm.store_name}}</h2>
            <span class="tips">向 ← ← ← 滑动</span>

            <div class="m-divbox">
                <div class="m-box">
                    <!--内容-->
                    <div class="box1 home-item" v-for="itm in itm.product" :key="itm.id">
                        <!--产品名-->
                        <h2>
                            {{itm.product_name}}
                        </h2>
                        <!--优惠-->
                        <span class="home-item-mtitle">
                            活动价：{{itm.discount}}元
                        </span>
                        <!--市场价-->
                        <span>
                            市场价{{itm.market}}
                        </span>
                        <!--二维码-->
                        <div class="n-main-box">
                            <!--<img class="n-img" :src="itm.qr" />-->
                            <div class="n-img" :id="itm.qr_id"></div>
                        </div>

                        <!--购买链接-->
                        <a :href="itm.shop" title="立即抢购" target="_blank" class="home-item-btn"> 立即抢购
                        </a>
                        <!--产品图片-->
                        <img :src="itm.image" class="home-item-pic">
                    </div>
                </div>
            </div>
        </div>

        <!--底部提示-->
        <div class="main-tips">
            提示：若无法领劵，直接截图去找对应店铺客服亦可享受同样优惠价格
        </div>
        <!--返回顶部-->
        <div style="text-align: center;"><a href="#Application">回到顶部</a></div>


    </div>

    <script>
        const App = Vue.createApp({
            setup() {
                let Random = Mock.Random;
                //生成数据
                let list = Mock.mock({
                    //图片
                    "images|2":
                    {
                        //桌面端图片
                        pc: Random.image("1200x648", "", "", "", "PC-Image"),
                        //移动端图片
                        phone: Random.image("720x1080", "", "", "", "Phon-Image"),
                    }
                    ,


                    //3个店铺
                    "rows|3": [
                        {
                            //店铺名
                            store_name: "@CTITLE",
                            //用于定位
                            id: "@NATURAL(1,100)",
                            //有三个产品
                            "product|3": [
                                {
                                    //产品名
                                    product_name: "@CTITLE",
                                    //二维码展示用ID
                                    qr_id: "@word(3,5)",
                                    //产品图片
                                    image: Random.dataImage("128x172", "我是产品图片"),
                                    //优惠价
                                    discount: "@INTEGER(30,100)",
                                    //市场价
                                    market: "@INTEGER(100,300)",
                                    //二维码图片
                                    //qr: Random.dataImage("300x300", "二维码"),
                                    //购买链接
                                    shop: "@url('https', 'donttgbd.com')",
                                }
                            ],
                        },
                    ],
                })






                //获取背景图
                let list_images = list.images;
                //获取店铺
                let list_arr = list.rows;
                //展示数据
                console.table(list);
                console.table(list_arr);




                //处理数据，将生成的链接转为二维码


                //处理list_arr数组，添加
                const qrShow = () => {
                    for (let i = 0; i < list_arr.length; i++) {
                        product_arr = list_arr[i]["product"];
                        for (let v = 0; v < product_arr.length; v++) {
                            //拿到ID
                            arr_ID = product_arr[v]["qr_id"];
                            //拿到链接
                            arr_URL = product_arr[v]["shop"];

                            //拿到产品名
                            title = product_arr[v]["product_name"];

                            //处理
                            console.log(arr_ID, arr_URL);


                            let qrcode = new QRCode(document.getElementById(arr_ID),

                                {
                                    text: arr_URL,
                                    width: 200,
                                    height: 200,
                                }
                            );
                            qrcode._el.title = title;//设置图片标题

                        }


                    };
                }

                //延时加载
                setTimeout(function () {
                    qrShow();
                }, 500);





                //移动端判断
                let awesome = Vue.ref();
                if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
                    // 当前设备是移动设备
                    awesome.value = false;
                } else {
                    //当前是非移动端设备
                    awesome.value = true;
                };








                return {
                    //项目数据
                    list_arr,
                    //背景图数据
                    list_images,
                    //移动端判断数据
                    awesome,

                }
            },

            //写一个组件，展示内容用
            //template: `<div><button @click="click">按钮</button></div>`,
        })


        App.mount("#Application")
    </script>

    <style type="text/css">
        /*@charset 'UTF-8';
        https://acts.book.qq.com/2020/7023087/index.html
        */

        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        ul {
            margin: 0
        }

        ol,
        ul {
            padding: 0;
            list-style: none
        }

        a {
            text-decoration: none;
            color: inherit
        }

        em {
            font-style: normal
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        input,
        select,
        textarea {
            font-size: 100%
        }

        input,
        select,
        textarea {
            font-family: inherit;
            box-sizing: border-box
        }

        html {
            font-size: 16px
        }

        body {
            font-family: sans-serif;
            line-height: 1.5;
            user-select: text;
            -webkit-user-select: text;
            color: #33373d;
            fill: currentColor;
            -webkit-tap-highlight-color: transparent;
            -webkit-text-size-adjust: none;
            -webkit-touch-callout: none
        }

        body {
            width: 100%;
            height: 100%;
            background: #fff
        }

        body,
        html {
            /*height: 100%;*/
            scroll-behavior: smooth
        }

        .home-list {
            max-width: 1300px;
            margin: 132px auto 0;
            font-size: 0;
            position: relative
        }

        .home-item {
            display: inline-block;
            vertical-align: top;
            font-size: 16px;
            width: 31%;
            height: 460px;
            background: #ebeef5;
            position: relative;
            border-radius: 20px;
            padding: 16px 22px 24px;
            box-sizing: border-box;
            margin-right: 25px;
            margin-bottom: 100px
        }

        .home-item-mtitle {
            display: inline-block;
            color: #fff;
            background: #F40;
            line-height: 24px;
            padding: 0 30px;
            border-radius: 20px;
            margin-bottom: 10px
        }

        .home-item-title {
            margin-bottom: 50px
        }

        .home-item-name {
            margin-bottom: 16px;
            color: #848588;
            font-size: 14px;
            text-decoration: line-through;
        }

        .home-item-msg {
            font-size: 14px;
            color: #3a3f48;
            margin-top: 1em;
            margin-bottom: 15px;
            display: -webkit-box;
            height: auto;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden
        }

        .home-item-btn {
            font-size: 16px;
            text-align: center;
            width: 100%;
            display: block;
            background-color: #e20a1f;
            border-radius: 5px;
            color: #fff;
            line-height: 48px;
            height: 48px;
            margin: 20px auto 0;
            float: right;
        }

        .home-item-pic {
            position: absolute;
            right: 24px;
            top: -70px;
            width: 128px;
            height: 172px;
            border-radius: 5px;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .5)
        }

        .home-footer {
            line-height: 120px;
            height: 120px;
            color: #cacaca;
            text-align: center;
            background: #3a3f48
        }

        @media screen and (max-width:640px) {
            .home-list {
                margin-top: 70px;
                width: 100%
            }

            .home-item {
                display: block;
                width: 90%;
                margin: 0 auto 50px
            }

            .home-item-pic {
                width: 90px;
                height: 125px;
                top: -25px
            }

            .home-item-mtitle {
                padding: 0 20px
            }



            .home-footer {
                line-height: 100px;
                height: 100px;
                font-size: 12px
            }

            .n-main-box b {
                font-size: 12px !important;
            }


        }



        .home-banner {
            position: relative;
            padding-top: 116%
        }

        .home-pic {
            position: absolute;
            margin: 0 auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: auto
        }



        .n-yhdh {


            margin-bottom: 1em;
        }


        .n-h2 {
            text-align: center;
            font-size: 28px;
        }

        .home-item h2 {
            margin: 0 0 1.8em 0;
            font-weight: bold;
            font-size: 26px;
        }

        .n-main-box {
            text-align: center;
            margin-top: 2em;
        }

        .n-main-box b {
            display: block;
            margin: 1em 0;
            font-size: 16px;
            font-weight: bolder;
            background-color: rgb(190, 26, 29);
            color: rgb(255, 255, 255);
        }

        .n-img img {
            display: block;
            margin: 0 auto 1em auto;
            width: 45%;
            height: auto;
        }

        .n-ul {
            margin: 0 0 2em 0;
            text-align: center;
        }

        .n-ul li {
            margin-bottom: .2em;
        }

        .n-ul li b {
            color: red;
        }

        .n-size {
            font-size: 14px;
        }

        /*印章*/
        .seal-result {
            width: 100px;
            height: 100px;
            transform: rotate(20deg);
            border: solid 2px green;
            border-radius: 100%;
            text-align: center;
            color: green;
            font-size: 18px;
            font-weight: bold;
            line-height: 88px;
            right: 10px;
            top: 8em;
            position: fixed;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 999;
        }

        .seal-result-fail {
            border-color: #adb5bd;
            color: #adb5bd;
        }




        /*移动端*/
        @media screen and (max-width: 768px) {

            .m-divbox {
                overflow: hidden;
                height: 100%;
            }

            .m-box {

                padding: 10px 0;
                white-space: nowrap;
                /*文本不会换行，文本会在在同一行上继续*/
                overflow-y: auto;
                /*可滑动*/
                padding: 4em 0 1em 0;
            }

            /*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
            /*.box::-webkit-scrollbar{
display: none;
}*/
            .box1 {
                width: 90% !important;
                margin-left: 3% !important;
                background: #fff;
                display: inline-block !important;
                /*行内块元素*/
            }

            .m-home-item-pic {
                position: relative;
                right: -12em;
                top: -24em;
                width: 128px;
                height: 172px;
                border-radius: 5px;
                object-fit: cover;
                box-shadow: 0 2px 8px rgb(0 0 0 / 50%);
            }

            .main-tips {
                margin-top: 10em;
            }

            .phone {
                display: block !important;
            }

            .pc {
                display: none;
            }

            .home-banner {
                padding-top: 116% !important;
            }

        }

        /*PC端*/
        @media screen and (min-width: 768px) {


            .n-yhdh {
                margin-top: 1em;
            }


            .m-divbox {
                max-width: 1300px;
                margin: 6em auto 0;
            }

        }

        /*翻页提示*/
        .tips {
            display: block;
            text-align: center;
            color: #F40;
        }

        /*提示信息*/
        .main-tips {
            text-align: center;
            color: red;
            font-size: 20px;
            font-weight: bold;
        }



        .phone {
            display: none;
        }

        .home-banner {
            padding-top: 56%;
        }

        /*表格*/
        .npc-table {
            margin: 0 auto;
            margin-bottom: 6em;
        }

        .npc-table tr>td:first-child {
            color: red;
            font-weight: bold;
        }
    </style>

</body>

</html>